<template>
    <div class="common courseStatic">
        <innerCommon 
            :location="location"
        >
        <template slot="left">
            <span>课程统计</span>
        </template>
        <div slot="table">
            <p class="title">汇总数据</p>
            <div>
                <num :numData="numData"></num>
            </div>
            <p class="title">数据详情</p>
            <div class="action">
                <div>
                    <selectDate @changTime="changTime"></selectDate>
                    <majorModule
                        style="margin-left:10px;"
                        @submitSearch="submitSearch"
                        :isSearch="false"
                    ></majorModule>
                </div>
                <download 
                    :name="'导出'" 
                    :api="'manage/course/exportCourseData'"
                    :fileName="'课程统计.xls'"></download>
            </div>
            <a-table 
                size="middle"
                :columns="columns" 
                :data-source="list" 
                :pagination="pagination"
                :rowKey="record=>record.id"
                :locale="{'emptyText': '暂无数据'}"
                bordered>
                <div slot="action" slot-scope="index,record" class="tableAction">
                    <span @click="toDetail(record)">查看详情</span>
                </div>
            </a-table>
        </div>
        </innerCommon>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '课程名称',
        dataIndex: 'title',
    },{
        title: '专业方向',
        dataIndex: 'major',
    },{
        title: '教学模块',
        dataIndex: 'module',
    },{
        title: '学习人数',
        dataIndex: 'joinedNum',
    },{
        title: '考核人数',
        dataIndex: 'recordNum',
    },{
        title: '考核通过人数',
        dataIndex: 'passedNum',
    },{
        title: '考核不通过人数',
        dataIndex: 'unpassedNum',
    },{
        title: '获得证书人数',
        dataIndex: 'certNum',
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:100
    }
]
import {getCourseStaticApi,getCourseStaticNumApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import selectDate from "@/components/common/selectDate"
import num from "@/components/common/num"
import download from "@/components/common/download"
import majorModule from "@/components/common/majorModule"
export default {
    name:"courseStatic",
    components:{innerCommon,num,selectDate,majorModule,download},
    created(){
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:"课程统计",
            path:'/courseStatic'
        }]
        this.init()
    },
    data(){
        return{
            columns,
            list:[],
            location:[],
            pagination:{pageSize:10,total:0},
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:'',
                startTime:"",
                endTime:'',
                majorId:''
            },
            numData:[{
                    name:'课程总数',
                    num:0,
                    src:require('../assets/sta1.png')
                },{
                    name:'学习人数',
                    num:0,
                    src:require('../assets/sta2.png')
                },{
                    name:'考核人数',
                    num:0,
                    src:require('../assets/sta3.png')
                },{
                    name:'获得证书人数',
                    num:0,
                    src:require('../assets/sta4.png')
                }],
        }
    },
    methods:{
        init(){
            this.getToken(getCourseStaticNumApi,{},res=>{
                this.numData[0].num=res.courseNum
                this.numData[1].num=res.studentNum
                this.numData[2].num=res.recordNum
                this.numData[3].num=res.certNum
            })
            this.getToken(getCourseStaticApi,this.searchInfo,res=>{
                this.list=res.data.map((item,index)=>({
                    ...item,
                    'index':index+1,
                    'major':item.majors[0].name,
                    'module':item.majors[1].name
                }))
                this.pagination.total=res.data.length
            })
        },
        // changePage(data){
        //     this.searchInfo.page=data.current
        //     this.pagination.current=data.current
        //     this.init()
        // },
        changTime(start,end){
            this.searchInfo.startTime=start
            this.searchInfo.endTime=end
            this.init()
        },
        submitSearch(data){
            this.searchInfo.keyword=data.keyword
            if(data.moduleId&&data.moduleId!=0){
                this.searchInfo.majorId=data.moduleId
            }else{
                this.searchInfo.majorId=data.majorId==0?null:data.majorId
            }
            this.init()
        },
        toDetail(data){
            this.$router.push({path:'/courseStaticDetail',query:{'id':data.id,'name':data.title}})
        }
    }
}
</script>
<style scoped lang="stylus">
.courseStatic
    .title
        line-height:40px;
        font-weight:bold;
        border-bottom:1px solid #ddd;
        border-left:2px solid #1890ff;
        padding-left:20px;
    .action
        display:flex;
        height:40px;
        align-items:center;
        margin-bottom:14px;
        justify-content:space-between
        div 
            display:flex;
            align-items:center;
</style>
